<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="status-bar"></view>
			<view class="nav-content">
				<view class="nav-left" @click="goBack">
					<text class="back-icon">←</text>
				</view>
				<view class="nav-title">个人资料</view>
				<view class="nav-right">
					<text class="more-icon">⋯</text>
				</view>
			</view>
		</view>

		<!-- 头像设置区域 -->
		<view class="avatar-section">
			<view class="avatar-card">
				<view class="avatar-info">
					<text class="section-title">头像设置</text>
					<text class="section-desc">点击更换头像</text>
				</view>
				<view class="avatar-container" @click="changeAvatar">
					<image class="profile-avatar" :src="userInfo.avatar" mode="aspectFill"></image>
					<view class="avatar-overlay">
						<text class="camera-icon">📷</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 基本信息区域 -->
		<view class="info-section">
			<view class="section-header">
				<text class="section-title">基本信息</text>
				<view class="title-line"></view>
			</view>
			
			<view class="info-card">
				<view class="info-item" @click="editNickname">
					<view class="item-icon nickname-icon">
						<text class="icon-text">用</text>
					</view>
					<view class="item-content">
						<text class="item-label">用户名</text>
						<text class="item-value">{{ userInfo.nickname }}</text>
					</view>
					<view class="item-arrow">
						<text class="arrow-icon">→</text>
					</view>
				</view>

				<view class="item-divider"></view>

				<view class="info-item" @click="editPhone">
					<view class="item-icon phone-icon">
						<text class="icon-text">📱</text>
					</view>
					<view class="item-content">
						<text class="item-label">绑定手机</text>
						<text class="item-value">{{ userInfo.phone }}</text>
					</view>
					<view class="item-arrow">
						<text class="arrow-icon">→</text>
					</view>
				</view>

				<view class="item-divider"></view>

				<view class="info-item" @click="editRealName">
					<view class="item-icon name-icon">
						<text class="icon-text">👤</text>
					</view>
					<view class="item-content">
						<text class="item-label">真实姓名</text>
						<text class="item-value" :class="{ placeholder: !userInfo.realName }">
							{{ userInfo.realName || '请输入真实姓名' }}
						</text>
					</view>
					<view class="item-arrow">
						<text class="arrow-icon">→</text>
					</view>
				</view>

				<view class="item-divider"></view>

				<view class="info-item" @click="editGender">
					<view class="item-icon gender-icon">
						<text class="icon-text">⚥</text>
					</view>
					<view class="item-content">
						<text class="item-label">性别</text>
						<text class="item-value">{{ userInfo.gender || '保密' }}</text>
					</view>
					<view class="item-arrow">
						<text class="arrow-icon">→</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 联系信息区域 -->
		<view class="contact-section">
			<view class="section-header">
				<text class="section-title">联系信息</text>
				<view class="title-line"></view>
			</view>
			
			<view class="contact-card">
				<view class="info-item" @click="editEmail">
					<view class="item-icon email-icon">
						<text class="icon-text">✉</text>
					</view>
					<view class="item-content">
						<text class="item-label">邮箱地址</text>
						<text class="item-value" :class="{ placeholder: !userInfo.email }">
							{{ userInfo.email || '请输入邮箱地址' }}
						</text>
					</view>
					<view class="item-arrow">
						<text class="arrow-icon">→</text>
					</view>
				</view>

				<view class="item-divider"></view>

				<view class="info-item" @click="editLocation">
					<view class="item-icon wechat-icon">
						<text class="icon-text">💬</text>
					</view>
					<view class="item-content">
						<text class="item-label">绑定微信</text>
						<view class="binding-status">
							<text class="status-text" :class="{ bound: userInfo.wechatBound }">
								{{ userInfo.wechatBound ? '已绑定' : '未绑定' }}
							</text>
							<view v-if="userInfo.wechatBound" class="status-badge">
								<text class="badge-text">✓</text>
							</view>
						</view>
					</view>
					<view class="item-arrow">
						<text class="arrow-icon">→</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 账户安全提示 -->
		<view class="security-notice">
			<view class="notice-icon">🛡</view>
			<view class="notice-content">
				<text class="notice-title">账户安全提醒</text>
				<text class="notice-text">请妥善保管个人信息，定期更新密码以确保账户安全</text>
			</view>
		</view>

		<!-- 退出登录按钮 -->
		<view class="logout-section">
			<button class="logout-btn" @click="logout">
				<text class="logout-text">退出登录</text>
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					avatar: '/static/logo.png',
					nickname: '微信用户',
					phone: '19083139164',
					realName: '',
					gender: '保密',
					email: '',
					wechatBound: true
				}
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			
			changeAvatar() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.userInfo.avatar = res.tempFilePaths[0];
						// 这里可以添加上传头像的逻辑
						console.log('选择的头像:', res.tempFilePaths[0]);
					}
				});
			},
			
			editNickname() {
				uni.navigateTo({
					url: '/pages/editProfile/editProfile?type=nickname&value=' + this.userInfo.nickname
				});
			},
			
			editPhone() {
				uni.navigateTo({
					url: '/pages/editProfile/editProfile?type=phone&value=' + this.userInfo.phone
				});
			},
			
			editRealName() {
				uni.navigateTo({
					url: '/pages/editProfile/editProfile?type=realName&value=' + (this.userInfo.realName || '')
				});
			},
			
			editGender() {
				uni.showActionSheet({
					itemList: ['男', '女', '保密'],
					success: (res) => {
						const genders = ['男', '女', '保密'];
						this.userInfo.gender = genders[res.tapIndex];
					}
				});
			},
			
			editEmail() {
				uni.navigateTo({
					url: '/pages/editProfile/editProfile?type=email&value=' + (this.userInfo.email || '')
				});
			},
			
			editLocation() {
				uni.showToast({
					title: '微信绑定功能',
					icon: 'none'
				});
			},
			
			logout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 清除用户数据
							uni.removeStorageSync('userInfo');
							uni.removeStorageSync('token');
							
							// 跳转到登录页面
							uni.reLaunch({
								url: '/pages/login/login'
							});
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
.container {
	background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
	min-height: 100vh;
}

/* 导航栏 */
.nav-bar {
	background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
	position: relative;
}

.status-bar {
	height: calc(var(--status-bar-height, 0) + 20rpx);
	background: transparent;
}

.nav-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
}

.nav-left, .nav-right {
	width: 100rpx;
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50rpx;
	transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
	position: relative;
}

.nav-left::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 50rpx;
	opacity: 0;
	transform: scale(0.8);
	transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.nav-left:active::before {
	opacity: 1;
	transform: scale(1);
}

.nav-left:active {
	transform: scale(0.95);
}

.back-icon {
	font-size: 48rpx;
	color: white;
	font-weight: bold;
	z-index: 1;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

.more-icon {
	font-size: 36rpx;
	color: white;
	z-index: 1;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

.nav-title {
	font-size: 36rpx;
	font-weight: 700;
	color: white;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

/* 头像设置区域 */
.avatar-section {
	margin: 30rpx;
}

.avatar-card {
	background: white;
	border-radius: 20rpx;
	padding: 35rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	border: 1rpx solid rgba(0, 0, 0, 0.04);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.avatar-info {
	flex: 1;
}

.section-title {
	font-size: 32rpx;
	font-weight: 700;
	color: #2c3e50;
	margin-bottom: 8rpx;
}

.section-desc {
	font-size: 24rpx;
	color: #7f8c8d;
}

.avatar-container {
	position: relative;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.avatar-container:active {
	transform: scale(0.95);
}

.profile-avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	border: 4rpx solid #ecf0f1;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
}

.avatar-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.avatar-container:active .avatar-overlay {
	opacity: 1;
}

.camera-icon {
	font-size: 32rpx;
	color: white;
}

/* 信息区域通用样式 */
.info-section, .contact-section {
	margin: 0 30rpx 30rpx;
}

.section-header {
	display: flex;
	align-items: center;
	gap: 15rpx;
	margin-bottom: 20rpx;
}

.title-line {
	width: 40rpx;
	height: 3rpx;
	background: linear-gradient(90deg, #3498db, #2980b9);
	border-radius: 2rpx;
}

/* 信息卡片 */
.info-card, .contact-card {
	background: white;
	border-radius: 20rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	border: 1rpx solid rgba(0, 0, 0, 0.04);
	overflow: hidden;
}

.info-item {
	display: flex;
	align-items: center;
	padding: 35rpx;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
}

.info-item:active {
	background: rgba(52, 152, 219, 0.05);
	transform: translateX(5rpx);
}

.item-icon {
	width: 50rpx;
	height: 50rpx;
	border-radius: 25rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 25rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.nickname-icon {
	background: linear-gradient(135deg, #3498db, #2980b9);
}

.phone-icon {
	background: linear-gradient(135deg, #27ae60, #229954);
}

.name-icon {
	background: linear-gradient(135deg, #f39c12, #e67e22);
}

.gender-icon {
	background: linear-gradient(135deg, #9b59b6, #8e44ad);
}

.email-icon {
	background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.wechat-icon {
	background: linear-gradient(135deg, #1abc9c, #16a085);
}

.icon-text {
	font-size: 24rpx;
	color: white;
	font-weight: 600;
	text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
}

.item-content {
	flex: 1;
}

.item-label {
	font-size: 30rpx;
	font-weight: 600;
	color: #2c3e50;
	margin-bottom: 8rpx;
	display: block;
}

.item-value {
	font-size: 26rpx;
	color: #34495e;
	line-height: 1.4;
}

.item-value.placeholder {
	color: #95a5a6;
	font-style: italic;
}

.binding-status {
	display: flex;
	align-items: center;
	gap: 12rpx;
}

.status-text {
	font-size: 26rpx;
	color: #e74c3c;
}

.status-text.bound {
	color: #27ae60;
}

.status-badge {
	width: 32rpx;
	height: 32rpx;
	background: #27ae60;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.badge-text {
	font-size: 18rpx;
	color: white;
	font-weight: bold;
}

.item-arrow {
	margin-left: 20rpx;
}

.arrow-icon {
	font-size: 28rpx;
	color: #bdc3c7;
	font-weight: 300;
	transition: all 0.3s ease;
}

.info-item:active .arrow-icon {
	color: #3498db;
	transform: translateX(3rpx);
}

.item-divider {
	height: 1rpx;
	background: linear-gradient(90deg, transparent, #ecf0f1, transparent);
	margin: 0 35rpx;
}

/* 安全提示 */
.security-notice {
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	margin: 0 30rpx 30rpx;
	border-radius: 16rpx;
	padding: 25rpx;
	display: flex;
	align-items: flex-start;
	gap: 20rpx;
	border: 1rpx solid rgba(52, 152, 219, 0.1);
}

.notice-icon {
	font-size: 32rpx;
	margin-top: 5rpx;
}

.notice-content {
	flex: 1;
}

.notice-title {
	font-size: 28rpx;
	font-weight: 600;
	color: #2c3e50;
	margin-bottom: 8rpx;
	display: block;
}

.notice-text {
	font-size: 24rpx;
	color: #7f8c8d;
	line-height: 1.5;
}

/* 退出登录按钮 */
.logout-section {
	margin: 0 30rpx 40rpx;
}

.logout-btn {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(135deg, #e74c3c, #c0392b);
	color: white;
	border: none;
	border-radius: 44rpx;
	font-size: 32rpx;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6rpx 20rpx rgba(231, 76, 60, 0.3);
	transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

.logout-btn:active {
	background: linear-gradient(135deg, #c0392b, #a93226);
	transform: translateY(2rpx);
	box-shadow: 0 4rpx 15rpx rgba(231, 76, 60, 0.4);
}

.logout-text {
	color: white;
	font-size: 32rpx;
	font-weight: 600;
}
</style>